<template>
    <div class="data-processing">
        <el-form v-model="form" ref="form" :rules="rules" >
            <el-form-item prop="zd">
                <el-input
                :rows="6"
                v-model="form.zd"
                placeholder="按字段顺序填写每个字段的名称和数据类型，不同字段的描述信息按行分隔，字段内的描述型芯按逗号分隔 如name,String"
                type="textarea">
                </el-input>
            </el-form-item>
            <el-form-item>
               <div class="titles">
                异常处理
                </div>
            </el-form-item>
                <el-form-item label="类型不一致" label-width="150">
                    <el-select v-model="form.region" placeholder="请选择类型">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="列数不一致" label-width="150" prop="colNum">
                    <el-select v-model="form.colNum" placeholder="请选择列数">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
               <div class="titles">
                平台存储
                </div>
            </el-form-item>
                  <el-form-item label="列数不一致" prop="tableName" label-width="200">
                    <el-input v-model="form.tableName"></el-input>
                </el-form-item>
                 <el-form-item label="列数不一致" prop="desc" label-width="200">
                    <el-input v-model.trim="form.desc" type="textarea" placeholder="数据表的说明，50个字符以内" :maxlength="50"></el-input>
                </el-form-item>
             <div class="control-box">
                <el-button type="default" @click="prev()">上一步</el-button>
                <el-button type="success" @click="confirm('form')">确认</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'dataProcessing',
    data () {
        return {
            rules: {
                zd: [
                    { require: true, trigger: 'blur', message: '请输入字段' }
                ],
                region: [
                    { require: true, trigger: 'change', message: '请选择异常处理类型' }
                ],
                colNum: [
                    { require: true, trigger: 'change', message: '请选择异常处理列数' }
                ],
                tableName: [
                    { require: true, trigger: 'blur', message: '请输入列表名' }
                ],
                desc: [
                    { require: true, trigger: 'blur', message: '请输入数据表的说明' }
                ]
            },
            form: {}
        }
    },
    methods: {
        prev () {
            this.$emit('prevStep', 2)
        },
        confirm (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                } else {
                }
            })
        }
    }
}
</script>
<style lang="less">
    .data-processing{
         padding: 20px 5%;
        .control-box{
            padding: 30px 0;
            float: inherit;
            text-align: center;
        }
        .titles {
            font-size: 18px;
            font-weight: bold;
        }
        .el-textarea {
            width: 100%;
            .el-textarea__inner {
                width: 100% !important;
            }
        }
        .el-select{
            width: 100%;
            .el-input{
                width: 100%;
            }
        }
    }
</style>
